<template>
  <div class="consultant">
    <iframe :src="url"
            frameborder="0"></iframe>
    <div class="tip-bottom">
      <img class="tip-bottom-img"
           src="../img/logo.png" />
      <div class="title-box">
        <div class="title-bot-text">“天天老友”APP</div>
        <div class="title-bot-text small">“友”你不孤单</div>
      </div>
      <div @click="toApp"
           class="tip-bottom-btn">前往APP</div>
    </div>
  </div>

</template>
<script>
export default {
  data () {
    return {
      url: '',
      callbackStr: ''
    }
  },
  mounted () {
    this.callbackStr = decodeURIComponent(window.location.href.split('callback=')[1])
    this.url = 'http://news.ttlaoyou.com/#/' + this.callbackStr
    if (this.url.indexOf('type=') !== -1) {
      this.toApp()
    }
  },
  methods: {
    toApp () {
      this.$router.push({
        path: 'toApp?callback=' + this.callbackStr
      })
    }
  }
}
</script>
<style scoped lang="less">
.consultant {
  width: 100%;
  height: 100%;
  position: fixed;
}
iframe {
  width: 100%;
  height: 90%;
  overflow: auto;
}
.tip-bottom {
  display: flex;
  align-items: center;
  position: fixed;
  bottom: 0;
  width: 100%;
  height: 10%;
  background: #fff;
  &-img {
    margin-left: 0.56rem;
    width: 0.96rem;
    height: 0.96rem;
    margin-right: 0.22rem;
  }
  &-btn {
    width: 2.5rem;
    height: 0.8rem;
    vertical-align: middle;
    background: #dc0e0e;
    color: #fff;
    font-size: 0.45rem;
    text-align: center;
    line-height: 0.8rem;
    position: absolute;
    right: 0.2rem;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 0.2rem;
  }
}
.small {
  font-size: 0.32rem;
}
</style>
